import{_ as c}from"./index.vue_vue_type_style_index_0_lang2.js";import{d as k,e as r,r as y,P as f,Q as g,R as d,$ as l,K as i,ar as v,X as N,a4 as b,aE as J,a2 as L,a5 as h}from"./elementPlusModules.js";const P=d("p",null,"数据代理时可通过属性 params 传入自定义的筛选参数，当 params 发生变动时自动发起数据请求",-1),w=d("p",null,"高级搜素可以考虑点击确认时覆盖 params 参数或者直接调用表格方法 reloadData ，在请求过程中带入筛选参数",-1),M={style:{display:"flex","justify-content":"space-between","padding-bottom":"20px"}},_=k({__name:"OtherFilter",setup(x){const u=r(`
<template>
  <div style="display: flex; justify-content: space-between; padding-bottom: 20px">
    <el-input
      v-model="value"
      :clearable="true"
      placeholder="请输入名称"
      style="width: 200px"
      @change="state.params.name = value"
    />
    <el-button @click="tableRef?.reloadData()">高级搜索</el-button>
  </div>
  <MerakXTable
    ref="tableRef"
    :columns-by-store="JSON.parse(JSON.stringify(state.columns))"
    :params="state.params"
    :columns="state.columns"
    :pagination="false"
    :query-data="handleQueryData"
  />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

import { ElInput, ElButton } from "element-plus";

import MerakXTable, { MerakXTableInstance, MerakXTableColumn } from "../../../../../components/MerakXTable";

const value = ref(\`\`);

const tableRef = ref<MerakXTableInstance>();

const state = reactive<{
  params: Record<string, any>;
  columns: MerakXTableColumn[];
}>({
  params: {
    name: ""
  },
  columns: [
    { field: "name", title: "Name" },
    { field: "age", title: "Age" },
    { field: "address", title: "Address" }
  ]
});

const handleQueryData: MerakXTableInstance["queryData"] = async ({ from }) => {
    const data = [
    {
      id: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      description: "My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."
    },
    {
      id: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      description: "My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."
    },
    {
      id: "3",
      name: "Not Expandable",
      age: 29,
      address: "Jiangsu No. 1 Lake Park",
      description: "This not expandable"
    },
    {
      id: "4",
      name: "Joe Black",
      age: 32,
      address: "Sydney No. 1 Lake Park",
      description: "My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."
    }
  ];
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ data: data.filter(v => v.name.includes(from?.name ?? "")) });
    }, 500);
  });
};
<\/script>
`),o=r(""),m=r(),t=y({params:{name:""},columns:[{field:"name",title:"Name"},{field:"age",title:"Age"},{field:"address",title:"Address"}]}),p=async({from:a})=>{const e=[{id:"1",name:"John Brown",age:32,address:"New York No. 1 Lake Park",description:"My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park."},{id:"2",name:"Jim Green",age:42,address:"London No. 1 Lake Park",description:"My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park."},{id:"3",name:"Not Expandable",age:29,address:"Jiangsu No. 1 Lake Park",description:"This not expandable"},{id:"4",name:"Joe Black",age:32,address:"Sydney No. 1 Lake Park",description:"My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park."}];return new Promise(n=>{setTimeout(()=>{n({data:e.filter(s=>s.name.includes((a==null?void 0:a.name)??""))})},500)})};return(a,e)=>(f(),g(h,null,[P,w,d("div",M,[l(i(v),{modelValue:o.value,"onUpdate:modelValue":e[0]||(e[0]=n=>o.value=n),clearable:!0,placeholder:"请输入名称",style:{width:"200px"},onChange:e[1]||(e[1]=n=>t.params.name=o.value)},null,8,["modelValue"]),l(i(J),{onClick:e[2]||(e[2]=n=>{var s;return(s=m.value)==null?void 0:s.reloadData()})},{default:N(()=>[b("高级搜索")]),_:1})]),l(i(c),{ref_key:"tableRef",ref:m,"columns-by-store":JSON.parse(JSON.stringify(t.columns)),params:t.params,columns:t.columns,pagination:!1,"query-data":p},null,8,["columns-by-store","params","columns"]),L(a.$slots,"default",{html:u.value})],64))}});export{_};
